import { SettingOutlined } from "@ant-design/icons";
import Bg from "../bg";
import { Drawer, message, Space, Typography } from "antd";
import { useState } from "react";
import styles from "./style.module.scss";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import { changeLayoutIndex } from "../../store/configSlice";
const CustomSet = () => {
  const [open, setOpen] = useState(false);
  const openDialog = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  const currentLayoutIndex = useAppSelector(
    (state) => state.config.currentLayoutIndex
  );
  const dispatch = useAppDispatch();
  return (
    <Bg width={50}>
      <SettingOutlined
        style={{ color: "#ffffff", cursor: "pointer" }}
        onClick={() => openDialog()}
      />

      <Drawer open={open} onClose={onClose} title="项目配置">
        <div>
          <Typography.Title level={4}>排版风格</Typography.Title>
          <div className={styles.container}>
            <Space>
              <div
                onClick={() => dispatch(changeLayoutIndex(0))}
                className={`${styles.first} ${
                  currentLayoutIndex === 0 && styles.active
                }`}
              >
                <div className={styles.left}></div>
                <div className={styles.right}>
                  <div className={styles.top}></div>
                  <div className={styles.bottom}></div>
                </div>
              </div>
              <div
                onClick={() => dispatch(changeLayoutIndex(1))}
                className={`${styles.secend} ${
                  currentLayoutIndex === 1 && styles.active
                }`}
              >
                <div className={styles.top}></div>
                <div className={styles.bottom}></div>
              </div>
              <div
                onClick={() => message.warning('很遗憾， 该布局还未完成， 请联系管理员') }
                className={`${styles.third} ${
                  currentLayoutIndex === 2 && styles.active
                }`}
              >
                <div className={styles.top}></div>
                <div className={styles.bottom}>
                  <div className={styles.left}></div>
                  <div className={styles.right}></div>
                </div>
              </div>
            </Space>
          </div>
        </div>
      </Drawer>
    </Bg>
  );
};

export default CustomSet;
